<template>
  <div>
    <el-table
      :data="roleList"
      :stripe="true"
      style="...">
      <el-table-column
        prop="roleId"
        label="编号">
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="角色名">
      </el-table-column>

      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <router-link :to="{path:'/manager/update',query:{id:scope.row.id}}"><el-button>修改</el-button></router-link>
          <el-button type="danger" @click="deleteStu(scope.row.id)">删除</el-button>
          <router-link :to="{path:'/menuTree',query:{roleId:scope.row.roleId}}"><el-button>授权</el-button></router-link>
        </template>
      </el-table-column>

    </el-table>

    <router-view/>
  </div>
</template>

<script>
export default {
  name: "RoleList",
  data(){
    return{
      roleList:[]
    }
  },
  created() {
    //发出ajax请求后端代码
    this.zs();

  },
  methods:{
    zs(){
      this.axios.get("/role/selectAll"
      ).then((resp)=>{
        this.roleList=resp.data;
      });
    },
    deleteStu(id) {
      if (confirm("是否确认删除")) {
        this.axios.delete("/record/delete/" + id).then((resp) => {
          //调用查询数据
          this.zs();
        });
      }
    }
  }
}
</script>

<style scoped>

</style>
